.in, .out {
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
}

.in {
  -webkit-animation-name: fadein;
}
.out {
  -webkit-animation-name: fadeout;
}

.in.reverse {
  -webkit-animation-name: fadein;
}

.out.reverse {
  -webkit-animation-name: fadeout;
}

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
